<template>
	<view class="conter">
		<view>
			<view class="cu-modal" :class="modalName == 'Image' ? 'show' : ''" @tap="hideModal">
				<view class="cu-dialog" v-if="goods && erweimapath && haibaoShow" @tap="hideModal">
					<view class="bg-img">
						<cc-poster @success="posterSuccess" :headSrc="imgUrl + user.avatar" :imgSrc="goods.itempic"
							:QrSrc="erweimapath" :Title="goods.itemtitle" :PriceTxt="goods.itemendprice"
							:OriginalTxt="goods.itemprice" :Referrer="goods.QR" :LineType="false"></cc-poster>
					</view>
				</view>
			</view>
		</view>
		<view class="qc">
			<view class="user_right">
				<canvas id="qrcode" canvas-id="qrcode" style="width: 122rpx; height: 122rpx"></canvas>
			</view>
		</view>
		<!-- 小图标 -->
		<view class="title-txt">
			<image src="../../../static/images/invite-txt.png" mode=""></image>
		</view>
		<view class="title-bgi">
			<image src="../../../static/images/ducks.png" mode=""></image>
		</view>
		<view class="body-txt">
			<view class="top_body">
				<view class="text-left">
					<view style="margin-top: 40rpx;font-size: 31rpx; color: #fff;">{{ masterName ? masterName : '暂无' }}
					</view>
					<view class="txt" style="margin-top: 20rpx">我的师傅</view>
				</view>
				<view class="shu"></view>
				<view class="text-right">
					<view style="margin-top: 40rpx;font-size: 31rpx; color: #fff;">{{ filteredArray.length }}个</view>
					<view class="txt" style="margin-top: 20rpx">有效用户</view>
				</view>
			</view>
			<view class="conterthree">
				<view class="text">
					我的邀请 （{{ rankList.length }}）人
				</view>
				<view class="" v-for="(item, index) in rankList" :key="index">
					<view class="pushone" style="margin-top:10rpx">
						<view class="textgreen" style="display: flex; justify-content: space-between; border: #8a92a3">
							<view style="margin-rigth: 20rpx">
								<u--image width="80rpx" height="80rpx" style="margin-right: 20rpx" radius="50%"
									:src="imgUrl + item.avatar"></u--image>
							</view>
							<view style="margin-top: 10rpx;">
								<view
									style="width: 230rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
									{{ item.nickname }}
								</view>
								<view
									style="font-size: 21rpx; font-family: Source Han Sans CN-Normal, Source Han Sans CN; font-weight: 350; color: #8a92a3; margin-top: 5rpx">
									{{ item.createTime }}
								</view>
							</view>
							<view style="font-size: 24rpx; margin-top: 20rpx; margin-left: 50rpx">
								{{ item.isRealName == 1 ? '已实名' : '未实名' }}
							</view>
							<view style="margin-left: 50rpx;margin-top: 16rpx;  color: red">
								<view style="width: 100rpx">
									{{ item.openHuipayAccount == 2 ? '已激活' : '未激活' }}
								</view>
							</view>
						</view>
					</view>
				</view>

			</view>
		</view>
		<view class="foot-box">
			<view class="copy" @click="copyText(user.myInvitationCode)">复制好友码</view>
			<view class="share" @click="showModal">分享图片邀请</view>
		</view>
		<!-- <view class="conterthree" >
			<view class="boxone"  v-for="(item, index) in topList" :key="index">
				<view class="pushone" style="margin-top: 20rpx">
					<view class="textgreen"
						style="width: 550rpx; margin-top: 35rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
						{{ item.name }}
						<view
							style="font-size: 21rpx; font-family: Source Han Sans CN-Normal, Source Han Sans CN; font-weight: 350; color: #8a92a3; margin-top: 5rpx">
							他邀请 {{ item.inviteNum }}人
						</view>
					</view>
				</view>
			</view>
		</view> -->
		<!-- 弹框 -->
		<u-popup bgColor="transparent" :show="show" :round="26" mode="center" @close="close">
			<view class="close">
				<view class="tabcvj">温馨提示</view>
				<view class="cctv">您确认要解除师徒关系吗？</view>
				<view class="clpmklj">
					<button style="background: #808080" v-on:click="cancel">取消</button>
					<button @click="quitSecureMaster">确定</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getMyInvitation,
		getTopList,
		getApprentice,
		secureMaster
	} from '../../../api/message/message.js';
	import UQRCode from 'uqrcodejs';
	import config from '@/config.js';
	import {
		getUserAdmin
	} from '../../../utils/auth.js';
	export default {
		data() {
			return {
				show: false,
				onshow: false,
				haibaoImg: null,
				modalName: '',
				haibaoShow: false,
				erweimapath: '', // 二维码地址
				goods: {
					itemid: '2nNozWXiotnRwxGUakBuXUD-0npyN5GSNmYDb0pgTxw',
					itemtitle: '邀请你一起加入GoGoDuck',
					itemprice: '',
					todaysale: '3',
					itempic: '../../../static/images/invitesadad.png',
					QR: ''
				},
				list: [{
						name: '我的邀请'
					},
					{
						name: '邀请排行榜'
					},
					{
						name: '我的师傅'
					}
				],
				current: 0,
				user: getUserAdmin(),
				imgUrl: config.gillUrl,
				inviteCode: config.RETURN_URL + '?inviteCode=',
				canvasId: 'qrcode',
				obj: {
					currentPage: 0,
					size: 1000,
					myInvitationCode: ''
				},
				rankList: [],
				topList: [],
				userInfo: '',
				// 二维码尺寸
				qrcodeSize: 136,
				// 最终生成的二维码图片
				qrcodeSrc: '',
				master: {},
				buildTime: '',
				buildTimeStamp: '',
				arr: {},
				filteredArray: [],
				masterName: '',
				invitationCode: ''
			};
		},
		components: {},
		created() {
			this.inviteCode = this.inviteCode + this.user.myInvitationCode;
			console.log(this.inviteCode);
			this.getMyinvitation();
			this.getTopList();
			this.getApprentice();
			this.goods.itemendprice = this.user.nickname;
			this.goods.QR = '邀请码：' + this.user.myInvitationCode;
		},

		mounted() {
			this.generateQRCode();
		},
		onShow() {
			this.getApprentice();
		},
		methods: {
			close() {
				this.show = false;
			},
			cancel() {
				this.show = false;
			},
			oncancel() {
				this.onshow = false;
			},
			posterSuccess(haibaoImg) {
				this.haibaoImg = haibaoImg;
				this.modalName = 'Image';
			},
			showModal() {
				if (!this.haibaoImg) {
					this.haibaoShow = true;

					uni.showLoading({
						title: '海报生成中...'
					});
				} else {
					this.modalName = 'Image';
				}
			},
			hideModal() {
				this.modalName = null;
			},
			// 点击复制
			copyText(number) {
				uni.setClipboardData({
					data: this.user.myInvitationCode,
					success: () => {
						uni.showToast({
							title: '复制成功',
							icon: 'success'
						});
					},
					fail: () => {
						uni.showToast({
							title: '复制失败',
							icon: 'none'
						});
					}
				});
			},

			// 获取师傅列表
			async getApprentice() {
				const data = await getApprentice();
				this.arr = data;
				if (data.code == 200) {
					// this.buildTime = data.data.buildTime;
					// this.buildTimeStamp = data.data.buildTimeStamp;
					if (data.data.master) {
						this.masterName = data.data.master.nickname;
					}
				}
			},
			// 解绑
			async quitSecureMaster() {
				// 获取当前时间的日期对象
				const currentTime = new Date();
				// 将 this.buildTime 转换为日期对象
				const buildTime = new Date(this.buildTime);
				// 将日期增加30天
				buildTime.setDate(buildTime.getDate() + 30);

				// 计算时间差（单位为毫秒）
				const timeDifference = currentTime - buildTime;
				// 输出时间差信息
				const secondsDifference = Math.floor(timeDifference / 1000); // 时间差（秒）
				if (this.secondsDifference < 0) {
					this.$modal.showToast('您还未到解绑时间');
				} else {
					const data = await secureMaster();
					// console.log(data);
					this.$modal.showToast('解绑成功');
					this.show = false;
					this.getApprentice();
				}
			},
			showModal() {
				if (!this.haibaoImg) {
					this.haibaoShow = true;
					uni.showLoading({
						title: '海报生成中...'
					});
				} else {
					this.modalName = 'Image';
				}
			},
			hideModal() {
				this.modalName = null;
			},

			gotryng() {
				uni.navigateTo({
					url: '/pages/AccountSecurity/invitation/tryng'
				});
			},
			async getTopList() {
				const res = await getTopList();
				this.topList = res.data;
			},
			async getMyinvitation() {
				let param = {};
				param.myInvitationCode = this.user.myInvitationCode;
				const res = await getMyInvitation(this.obj, param);
				this.rankList = res.data.content;
				// this.rankList.forEach((item) => {
				// 	if (item.isRealName == 1 && item.openHuipayAccount == 2) {
				// 		this.userList.push(item);
				// 		console.log(this.userList,'ahfbkiWFBK');
				// 	}
				// });
				this.filteredArray = this.rankList.filter((item) => item.isRealName === 1 && item.openHuipayAccount ===
					2);

				// filteredArray 现在包含符合条件的元素
			},
			change(index) {
				this.current = index.index;
			},
			generateQRCode() {
				//获取uQRCode实例
				var qr = new UQRCode();
				// 设置二维码内容
				qr.data = this.inviteCode;
				// 设置二维码大小，必须与canvas设置的宽高一致
				qr.size = 45;
				// // 调用制作二维码方法
				qr.make();
				// 获取canvas上下文
				var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
				// 设置uQRCode实例的canvas上下文
				qr.canvasContext = canvasContext;
				// 调用绘制方法将二维码图案绘制到canvas上
				qr.drawCanvas();

				setTimeout(() => {
					uni.canvasToTempFilePath({
						canvasId: qr.canvasContext.id,
						fileType: this.fileType,
						width: 45,
						height: 45,
						success: (res) => {
							// console.log(res,'图片路径');
							this.erweimapath = res.tempFilePath;
						},
						fail: (res) => {
							// console.log(res,'图片路径');
							this.erweimapath = res.tempFilePath;
						},
						complete(res) {
							// console.log("执行完成：",res)
						}
					});

				}, 300);
			},

			saveToAlbum() {
				setTimeout(() => {
					uni.canvasToTempFilePath({
							canvasId: this.canvasId,
							success: (res) => {
								uni.saveImageToPhotosAlbum({
									filePath: res.tempFilePath,
									success: (res1) => {
										// console.log(res1);
										uni.showToast({
											title: '保存成功！',
											icon: 'success'
										});
									},
									fail: (err1) => {
										// console.log(err1, res.tempFilePath);
										uni.showToast({
											title: '保存失败！',
											icon: 'error'
										});
									}
								});
							},
							fail: (err) => {
								// console.log(err);
							}
						}
						// this // 组件内使用必传当前实例
					);
				}, 300);
			}
		}
	};
</script>

<style lang="scss" scoped>
	// 新加图片
	.title-txt {
		margin: 100rpx auto 79rpx;

		image {
			width: 225rpx;
			height: 60rpx;
			margin-left: 35%;
		}
	}

	.title-bgi {
		image {
			width: 100%;
			height: 100rpx;
		}
	}

	// 新加图片
	.foot-box {
		width: 100%;
		bottom: 80rpx;
		display: flex;
		position: fixed;
		justify-content: space-evenly;

		.copy {
			width: 284rpx;
			height: 87rpx;
			background: #211F30;
			border-radius: 17rpx;
			border: 1px solid #3c424d;
			font-size: 26rpx;
			text-align: center;
			font-family: "font";
			font-weight: 700;
			color: #ffffff;
			line-height: 92rpx;
		}

		.share {
			width: 284rpx;
			height: 87rpx;
			border-radius: 17rpx;
			font-size: 26rpx;
			font-family: "font";
			font-weight: 700;
			color: #ffffff;
			line-height: 92rpx;
			text-align: center;
			background: #46A6F8 linear-gradient(90deg, #3ADFEB 0%, #4463FF 100%);
		}
	}

	.body-txt {
		width: 100%;
		height: 100vh;
		background: #130F26;
		border-radius: 70rpx 70rpx 0 0;
		padding: 34.88rpx 39rpx;

		.top_body {
			width: 680rpx;
			height: 155rpx;
			color: #fff;
			display: flex;
			background: #211F30;
			border-radius: 40rpx;
			border: 1px solid #3c424d;
			justify-content: space-evenly;

			.shu {
				width: 1px;
				height: 49px;
				background: #3c424d;
				border-radius: 0px 0px 0px 0px;
				margin-top: 35rpx;
			}

			.text-left {
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 24rpx;
				font-family: "font";
				font-weight: 400;
				color: #8A92A3;
				// margin-top: 70rpx;
				line-height: 17px;

				.txt {
					margin-bottom: 20rpx;
				}
			}

			.text-right {
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 24rpx;
				font-family: "font";
				font-weight: 400;
				color: #8A92A3;
				line-height: 17px;
			}
		}
	}

	.cu-modal {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1110;
		opacity: 0;
		outline: 0;
		text-align: center;
		-ms-transform: scale(1.185);
		transform: scale(1.185);
		backface-visibility: hidden;
		perspective: 2000upx;
		background: rgba(0, 0, 0, 0.6);
		transition: all 0.3s ease-in-out 0s;
		pointer-events: none;
	}

	.cu-modal::before {
		content: '\200B';
		display: inline-block;
		height: 100%;
		vertical-align: middle;
	}

	.cu-modal.show {
		opacity: 1;
		transition-duration: 0.3s;
		-ms-transform: scale(1);
		transform: scale(1);
		overflow-x: hidden;
		overflow-y: auto;
		pointer-events: auto;
	}

	.cu-dialog {
		position: relative;
		display: inline-block;
		vertical-align: middle;
		margin-left: auto;
		margin-right: auto;
		width: 680upx;
		max-width: 100%;
		border-radius: 14upx;
		overflow: hidden;
	}

	.boxone {
		display: flex;
	}

	.box {
		width: 680rpx;
		height: 120rpx;
		display: flex;
	}

	.conter {
		.trying {
			color: #ffffff;
			font-family: 'font';
			font-weight: 700;
			font-size: 30rpx;
			position: absolute;
			top: 0;
			right: 70rpx;
		}

		.coterone {
			width: 621rpx;
			height: 933rpx;
			border-radius: 9rpx;
			opacity: 1;
			margin: 62.88rpx;
		}

		.cotertow {
			width: 70rpx;
			height: 112rpx;
			background: #d8d8d8;
			border-radius: 5rpx;
			opacity: 1;
			margin: auto;
		}

		.icon {
			margin: 0rpx 355rpx 35rpx 355rpx;
		}

		.iconss {
			color: #fff;
			text-align: center;
			margin-top: -35rpx;
			padding: 0 0 20rpx 0;
		}

		.conterthree {
			width: 680rpx;
			background: #211F30;
			border-radius: 40rpx;
			border: 2rpx solid #3C424D;
			margin-top: 34.88rpx;

			.text {
				font-size: 28rpx;
				font-family: 'font';
				font-weight: 400;
				color: #8A92A3;
				padding: 20rpx 20rpx 20rpx 20rpx;
			}

			.pushone {
				display: flex;
				width: 630rpx;
				height: 120.35rpx;
				margin: 15rpx 24rpx;

				.phuntow {
					width: 80rpx;
					height: 80rpx;
					background: #d8d8d8;
					opacity: 1;
					border-radius: 50%;
					margin-top: 20.93rpx;
					margin-left: 20.93rpx;
				}

				.textgreen {
					margin-top: 25rpx;
					margin-left: 20rpx;
					font-size: 28rpx;
					font-family: 'font';
					font-weight: 400;
					color: #ffffff;
				}
			}
		}
	}

	.user {
		position: absolute;
		top: 840rpx;
		left: 80rpx;

		.user_head {
			width: 73rpx;
			height: 72rpx;
			border-radius: 19rpx;
		}
	}

	.user_centers {
		display: flex;
		color: #fff;
		transform: scale(0.7);
		font-family: 'font';
		background: #333333;
		border-radius: 21rpx;
		margin-left: -88rpx;
		padding: 8rpx 20rpx 8rpx 20rpx;
	}

	.user_right {
		position: absolute;
		top: -200rpx;
	}

	// 00 3
	.three_box {
		width: 680rpx;
		background: #15142d;
		border-radius: 23rpx;
		opacity: 1;
		margin: 33.14rpx 34.88rpx;
		padding-bottom: 100rpx;

		.pushone {
			position: absolute;
			width: 630rpx;
			height: 120.35rpx;
			margin: 15rpx 24rpx;
			display: flex;
			border-bottom: 1rpx solid #2c2c2c;

			.phuntow {
				width: 80rpx;
				height: 80rpx;
				background: #d8d8d8;
				opacity: 1;
				border-radius: 50%;
				margin-top: 20.93rpx;
				margin-left: 20.93rpx;
			}

			.textgreen {
				margin-top: 25rpx;
				margin-left: 20rpx;
				font-size: 28rpx;
				font-family: 'font';
				font-weight: 400;
				color: #ffffff;
			}

			.button {
				width: 120rpx;
				height: 50rpx;
				background: linear-gradient(270deg, #4463ff 0%, #3addeb 100%);
				text-align: center;
				line-height: 52rpx;
				border-radius: 14rpx;
				margin-left: 120rpx;
				margin-top: 15rpx;
			}
		}
	}

	// 0000
	.close {
		width: 580rpx;
		height: 280rpx;
		background: #0d0e11;
		border-radius: 35rpx;
		border: 1rpx solid #484d59;

		.tabcvj {
			text-align: center;
			font-size: 40rpx;
			color: #ffffff;
			margin-top: 20rpx;
			font-family: 'font';
		}

		.cctv {
			text-align: center;
			color: #ffffff;
			margin-top: 30rpx;
			font-family: 'font';
		}

		.clpmklj {
			display: flex;
			margin: 40rpx 0 0 0;

			button {
				width: 200rpx;
				height: 77rpx;
				background: linear-gradient(90deg, #3adfeb 0%, #4463ff 100%);
				box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
				border-radius: 26rpx;
				font-size: 35rpx;
				font-family: Source Han Sans CN-Bold, Source Han Sans CN;
				font-weight: 700;
				color: #ffffff;
				line-height: 77rpx;
				text-align: center;
			}
		}
	}
</style>